<!-- 我的钱包 -->
<template>
  <view class="wallet-wrap">
    <!-- 钱包卡片 -->
		 <view class="filter-box">
    <i-card
      background="url('../../static/images/xq_bg.png') no-repeat center center"
    >
      <view class="card-box">
        <view class="card-head u-flex u-col-center">
          <view class="card-title u-m-r-10">累计收益 
					<image @tap="showMoney = !showMoney" src="../../static/images/eyes_icon.png" mode="widthFix" class="card-bg"></image>

					</view>
          <!-- <view
            
            class="u-iconfont"
            :class="showMoney ? 'uicon-eye' : 'uicon-eye-off'"
            style="color: #fff; font-size: 36rpx"
          ></view> -->
          <view class="money-num u-p-t-50">{{
            showMoney ? userInfo.chargingAmount || "0.00" : "*****"
          }}</view>
        </view>

        <i-buttons @tap="taps" border="#FFFFFF" color="#FFFFFF" bgColor="rgba(255,255,255,0.2)"
         radius="48rpx" padding="12rpx 32rpx" >详情</i-buttons
        >
      </view>
    </i-card>
	</view>
	
    <view class="scroll_body">
      <scroll-view
        scroll-y="true"
        style="height: 100%"
        @scrolltolower="reachBottom"
      >
        <view
          class="wallet-list"
          v-for="(item, index) in walletLog"
          :key="index"
        >
          <view class="titles">
            <view class="fs-bold">
              <!-- {{item.accountTrend}} -->
              {{ item.createTime }}
            </view>
          </view>
          <view class="list-content">
            <view class="list-content_item">
              <text>设备名称</text>
              <text>{{ item.productName || "--" }}</text>
            </view>
            <view class="list-content_item">
              <text>设备地址</text>
              <text>{{ item.address || "--" }}</text>
            </view>
            <!-- <view class="list-content_item">
              <text>充电单价</text>
              <text>￥ {{ item.price || "0.00" }}</text>
            </view> -->
            <view class="list-content_item">
              <text>收益金额</text>
              <text>￥ {{ item.amount || "0.00" }}</text>
            </view>
            <view class="list-content_item">
              <text>网点名称</text>
              <text>{{ item.outletsName || "--" }}</text>
            </view>

            <view class="list-content_item" style="align-items: flex-start;">
              <text>网点地址</text>
              <text style="max-width: 70%; text-align: end;">{{ item.outletsAddress || "--" }}</text>
            </view>
            <view class="list-content_item">
              <text>创建时间</text>
              <text>{{ item.createTime || "--" }}</text>
            </view>
          </view>
        </view>
        <i-more height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
        <!-- <u-loadmore  height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" /> -->
      </scroll-view>
			<i-notData height="400rpx" v-if="isEmpty" text="暂无数据" />

    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue';
import useStore from "../../stores/index";
import { getDeviceIncomeList } from "../../api/order";

const store = useStore();
const userInfo = computed(() => store.userInfo);
const isLogin = computed(() => store.isLogin);

const isEmpty = ref(false);
const stateCurrent = ref(""); // 默认
const statusList = ref([
  {
    name: "订单收益",
    value: "",
  },
  {
    name: "下级收益",
    value: "1",
  },
  {
    name: "基数收益",
    value: "3",
  },
  {
    name: "补贴收益",
    value: "4",
  },
]);
const showMoney = ref(true);
// 日期选择
const showCalendar = ref(false);
const selDateText = ref("");
const walletLog = ref<any[]>([]); // 钱包记录
const propsDate = ref(""); // 日期参数
const incomeMoney = ref(""); // 收入
const expendMoney = ref(""); // 支出
const loadStatus = ref("loadmore"); // loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
const currentPage = ref(1);
const lastPage = ref(1);
const formData = reactive({
  ypageNum: 1,
  ypageSize: 15,
  total: 0,
});

// 生命周期方法替代
onMounted(() => {
  if (isLogin.value) {
    getUserInfo();
  }
  formData.ypageNum = 1;
  walletLog.value = [];
  getDeviceIncomeListData();
});

// 获取设备收益列表
const getDeviceIncomeListData = async () => {
  uni.showLoading(
    {
      title: "加载中...",
      mask: true
    }
  )
	const res: any = await getDeviceIncomeList(formData)
	if (res.code === 200) {
		walletLog.value = walletLog.value.concat(res.rows);
		isEmpty.value = !walletLog.value.length;
		formData.total = res.total;
		loadStatus.value =
			walletLog.value.length < formData.total ? "loadmore" : "nomore";
	}
  uni.hideLoading();
};

// 获取用户信息
const getUserInfo = () => {
  store.setUserInfo();
};

// 跳转详情页
const taps = () => {
  uni.navigateTo({
    url: "/pages/order/allRevenueDetails"
  });
};

// 触底加载更多
const reachBottom = () => {
	console.log('ssssss');
	
  if (walletLog.value.length < formData.total) {
    formData.ypageNum += 1;
    getDeviceIncomeListData();
  }
};



</script>

<style lang="scss">
.wallet-wrap {
  height: calc(100vh - 88rpx - var(--status-bar-height));
  width: 100%;
  overflow: hidden;
	display: flex;
	flex-direction: column;

}
// 钱包记录
.wallet-list {
  @include card;
  @include flexC;
	box-sizing: border-box;
  // padding: 24rpx 32rpx;

	width: calc(100% - 48rpx);
	margin: 0 auto;
	padding: 24rpx 32rpx;
  margin-top: 24rpx;

  .head-img {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    background: #ccc;
  }

  .list-content {
    margin-top: 24rpx;
    width: 100%;
    // flex: 1;
    &_item {
      @include flexRS;
      padding: 8rpx 0;
      text:nth-child(2) {
        color: #999;
      }
    }
  }

  .money {
    font-size: 28rpx;
    font-weight: bold;

    .add {
      color: #7063d2;
    }

    .minus {
      color: #333333;
    }
  }
}

.card-box {
    // width: 100%;
		box-sizing: border-box;
    // padding: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
		.card-title {
			margin-bottom: 24rpx;
			display: flex;
			align-items: center;
			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 10rpx;
			}
		}

    .card-head {
      color: #fff;
      font-size: 30rpx;
			display: flex;
			flex-direction: column;
    }

    .money-num {
      font-size: 48rpx;
			font-family: DIN Alternate, DIN Alternate;
			font-weight: bold;
      color: #ffffff;
    }

    .reduce-num {
      font-size: 26rpx;
      font-weight: 400;
      color: #ffffff;
    }

    .withdraw-btn {
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      background: #ffffff;
      border-radius: 30px;
      font-size: 24rpx;
      font-weight: 500;
      color: #5848c4;
    }

    .topup-btn {
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 30px;
      font-size: 24rpx;
      font-weight: 500;
      color: #fff;
      border: 1px solid #fff;
      position: absolute;
      right: 180rpx;
      top: 40rpx;
    }
  }
// 筛选

.filter-box {
  // height: 240rpx;
	margin-top: 24rpx;
}

// 分类
.state-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-bottom: 1rpx solid rgba(#999, 0.5);

  .state-title {
    color: #666;
    font-weight: 500;
    font-size: 28rpx;
    line-height: 90rpx;
  }

  .title-active {
    color: #333;
  }

  .underline {
    display: block;
    width: 68rpx;
    height: 4rpx;
    background: #fff;
    border-radius: 2rpx;
  }

  .underline-active {
    background: #5e49c3;
    display: block;
    width: 68rpx;
    height: 4rpx;
    border-radius: 2rpx;
  }
}

.scroll_body {
	// flex: 1;
	height: calc(100% - 192rpx);
  .titles {
    width: 100%;
    @include flexRS;
  }
}
</style>
